<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Boost 搜索</title>
    <style>
        @import url('https://static.zeoseven.com/zsft/2/main/result.css');
        @font-face {
            font-family: "JetBrains Mono";
            src: url('https://static.zeoseven.com/zsft/hk/main.woff2') format('woff2'),
                url('https://static-host.zeoseven.com/zsft/hk/main.woff2') format('woff2');
        }
        @font-face {
            font-family: 'LXGW ZhenKai';
            src: url();
        }
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            margin: 0;
            padding: 0;
            overflow-x: hidden; /* 防止横向滚动 */
        }
        
        /* 确保所有元素的padding包含在宽度内 */
        * {
            box-sizing: border-box;
        }
        
        .main {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-top: -100px;
        }
        .logo {
            font-family: 'LXGW ZhenKai';
            font-size: 90px;
            font-weight: bold;
            color: #4285F4;
            margin-bottom: 30px;
        }
        .logo span:nth-child(1) { color: #4285F4; }
        .logo span:nth-child(2) { color: #EA4335; }
        .logo span:nth-child(3) { color: #FBBC05; }
        .logo span:nth-child(4) { color: #4285F4; }
        .logo span:nth-child(5) { color: #34A853; }
        .logo span:nth-child(6) { color: #EA4335; }
        .search-box {
            display: flex;
            flex-direction: column;
            width: 584px;
            max-width: 90%;
        }
        .search-input {
            display: flex;
            border: 1px solid #dfe1e5;
            border-radius: 24px;
            height: 44px;
            padding: 0 15px;
            box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
        }
        .search-input:hover, .search-input:focus-within {
            box-shadow: 0 1px 8px rgba(32, 33, 36, 0.3);
        }
        .search-input input {
            flex: 1;
            border: none;
            outline: none;
            height: 100%;
            font-size: 16px;
        }
        .search-icon {
            display: flex;
            align-items: center;
            color: #9aa0a6;
            padding-right: 10px;
        }
        @media (max-width: 650px) {
            .search-box {
                width: 90%;
            }
            .logo {
                font-size: 70px;
            }
        }
        
        /* 添加社交图标的样式 */
        .social-links {
            display: flex;
            justify-content: center;
            margin-top: 30px;
            gap: 20px;
        }
        
        .social-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #f8f9fa;
            transition: transform 0.2s, background-color 0.2s;
        }
        
        .social-link:hover {
            transform: scale(1.1);
            background-color: #e8e8e8;
        }
        
        .social-link svg {
            width: 24px;
            height: 24px;
        }
        
        .github-icon path {
            fill: #24292e;
        }
        
        .gitee-icon path {
            fill: #C71D23;
        }
        
        /* 搜索结果样式 */
        .search-results {
            font-family: "JetBrains Mono";
            width: 100%;
            max-width: 650px;
            margin: 30px auto;
            display: none;
            padding: 0 20px;
            overflow-wrap: break-word; /* 确保长文本会换行 */
            word-break: break-all; /* 在必要时打断单词 */
            /* 移除固定最小高度，改为自适应内容 */
            min-height: auto;
        }
        
        .result-item {
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .result-item:last-child {
            border-bottom: none;
        }
        
        .result-title {
            font-size: 18px;
            color: #1a0dab;
            margin-bottom: 5px;
            text-decoration: none;
            display: block;
        }
        
        .result-title:hover {
            text-decoration: underline;
        }
        
        .result-url {
            color: #006621;
            font-size: 14px;
            margin-bottom: 5px;
            overflow: hidden;
            text-overflow: ellipsis; /* 长URL显示省略号 */
            white-space: nowrap; /* 防止URL换行 */
        }
        
        .result-body {
            color: #545454;
            font-size: 14px;
            line-height: 1.5;
            overflow-wrap: break-word; /* 确保长文本会换行 */
        }
        
        .highlight {
            background-color: #ffeb3b40;
            font-weight: bold;
            padding: 0 2px;
        }
        
        .loading {
            display: none;
            text-align: center;
            margin-top: 20px;
        }
        
        /* 修改无结果提示的样式 */
        .no-results {
            font-family: "LXGW ZhenKai";
            text-align: center;
            color: #5f6368;
            margin-top: 15px;
            margin-bottom: 0;
            display: none;
            font-size: 20px;
            width: 100%;
            max-width: 584px;
        }
        
        /* 搜索后的布局调整 */
        .results-active .main {
            margin-top: 20px;
            transition: margin-top 0.3s ease;
        }
        
        .results-active .logo {
            font-size: 40px;
            margin-bottom: 15px;
            transition: font-size 0.3s ease, margin-bottom 0.3s ease;
        }
        
        .results-active .social-links {
            display: none;
        }

        /* 右上角图标容器样式 */
        .header {
            position: fixed;
            top: 15px;
            right: 15px;
            display: flex;
            z-index: 100;
        }
        
        .header .social-links {
            margin-top: 0;
            gap: 10px;
        }
        
        .header .social-link {
            width: 32px;
            height: 32px;
        }
        
        /* 修改社交链接的行为 - 不隐藏，而是在header中显示 */
        .results-active .main .social-links {
            display: none;
        }
        
        .results-active .header {
            display: block;
        }

        /* 分页控制样式 */
        .pagination {
            display: none;
            margin: 30px auto;
            text-align: center;
            user-select: none;
        }
        
        .pagination-button {
            display: inline-block;
            padding: 8px 16px;
            margin: 0 4px;
            background-color: #f8f9fa;
            border: 1px solid #dadce0;
            border-radius: 4px;
            color: #4285F4;
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .pagination-button:hover {
            background-color: #e8eaed;
        }
        
        .pagination-button.disabled {
            color: #9aa0a6;
            cursor: not-allowed;
            background-color: #f8f9fa;
        }
        
        .page-info {
            display: inline-block;
            margin: 0 15px;
            color: #5f6368;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <!-- 右上角图标容器 -->
    <div class="header">
        <div class="social-links">
            <a href="https://github.com/H0308/BoostSearchingEngine" target="_blank" class="social-link" title="跳转项目主页">
                <svg class="github-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                </svg>
            </a>
            <a href="https://gitee.com/EPSDA/BoostSearchingEngine" target="_blank" class="social-link" title="Gitee">
                <svg class="gitee-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path d="M11.984 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.016 0zm6.09 5.333c.328 0 .593.266.593.593v1.482a.594.594 0 0 1-.593.593H8.905c-.982 0-1.778.796-1.778 1.778v5.63c0 .327.266.592.593.592h5.63c.982 0 1.778-.796 1.778-1.778v-.296a.593.593 0 0 0-.592-.593h-4.15a.592.592 0 0 1-.592-.593v-1.481c0-.327.265-.593.592-.593h6.815c.327 0 .593.266.593.593v3.408a3.558 3.558 0 0 1-3.556 3.556h-6.74a.593.593 0 0 1-.593-.593V9.778a3.558 3.558 0 0 1 3.556-3.556h6.889z"/>
                </svg>
            </a>
        </div>
    </div>

    <div class="main">
        <div class="logo">
            <span>B</span><span>o</span><span>o</span><span>s</span><span>t</span>
        </div>
        
        <div class="search-box">
            <form id="search-form">
                <div class="search-input">
                    <div class="search-icon">
                        <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24">
                            <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
                        </svg>
                    </div>
                    <input type="text" id="search-input" name="keyword" autofocus placeholder="欢迎使用Boost库搜索，请输入要搜索的关键字">
                </div>
            </form>
        </div>
        
        <!-- 将无结果提示移到搜索框下方 -->
        <div class="no-results" id="no-results">
            没有找到相关结果，请尝试其他关键词
        </div>
        
    </div>
    
    <!-- 添加搜索结果区域 -->
    <div class="loading" id="loading">
        <svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
            <circle cx="20" cy="20" r="18" fill="none" stroke="#4285F4" stroke-width="4" stroke-dasharray="100" stroke-dashoffset="0">
                <animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1s" repeatCount="indefinite" />
            </circle>
        </svg>
    </div>
    
    <div class="search-results" id="search-results"></div>
    
    <!-- 添加分页控制 -->
    <div class="pagination" id="pagination">
        <span class="pagination-button" id="prev-page">上一页</span>
        <span class="page-info" id="page-info">第 <span id="current-page">1</span> 页，共 <span id="total-pages">1</span> 页</span>
        <span class="pagination-button" id="next-page">下一页</span>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const searchForm = document.getElementById('search-form');
            const searchInput = document.getElementById('search-input');
            const searchResults = document.getElementById('search-results');
            const loading = document.getElementById('loading');
            const noResults = document.getElementById('no-results');
            const pagination = document.getElementById('pagination');
            const prevPageBtn = document.getElementById('prev-page');
            const nextPageBtn = document.getElementById('next-page');
            const currentPageEl = document.getElementById('current-page');
            const totalPagesEl = document.getElementById('total-pages');
            
            // 分页相关变量
            let allResults = [];          // 所有搜索结果
            let currentPage = 1;          // 当前页码
            let resultsPerPage = 10;      // 每页显示的结果数
            let totalPages = 1;           // 总页数
            
            // 检查当前URL路径，如果是/search则重定向
            if (window.location.pathname === '/search') {
                const urlParams = new URLSearchParams(window.location.search);
                const keyword = urlParams.get('keyword');
                // 保留搜索参数，但重定向到主页
                window.location.href = '/?keyword=' + encodeURIComponent(keyword || '');
                return; // 防止下面的代码执行
            }
            
            // 从URL获取搜索参数
            const urlParams = new URLSearchParams(window.location.search);
            const keywordParam = urlParams.get('keyword');
            
            // 如果URL中有关键词，自动执行搜索
            if (keywordParam) {
                searchInput.value = keywordParam;
                performSearch(keywordParam);
            }
            
            // 监听表单提交事件
            searchForm.addEventListener('submit', function(e) {
                e.preventDefault();
                const keyword = searchInput.value.trim();
                
                if (keyword) {
                    // 修改这里 - 更新URL但不改变路径，只改变参数
                    const newUrl = '/search?keyword=' + encodeURIComponent(keyword);
                    window.history.pushState({}, '', newUrl);
                    
                    performSearch(keyword);
                }
            });
            
            // 执行搜索
            function performSearch(keyword) {
                // 重置分页
                currentPage = 1;
                
                // 显示加载动画
                loading.style.display = 'block';
                searchResults.style.display = 'none';
                noResults.style.display = 'none';
                pagination.style.display = 'none'; // 初始隐藏分页控件，直到有结果
                
                // 添加搜索后的样式
                document.body.classList.add('results-active');
                
                // 创建Ajax请求，使用/search?keyword=xxx格式获取数据
                const xhr = new XMLHttpRequest();
                xhr.open('GET', '/search?keyword=' + encodeURIComponent(keyword), true);
                xhr.setRequestHeader('Accept', 'application/json');
                
                xhr.onload = function() {
                    loading.style.display = 'none';
                    
                    if (xhr.status === 200) {
                        try {
                            const response = JSON.parse(xhr.responseText);
                            renderResults(response, keyword);
                        } catch (e) {
                            console.error('解析JSON失败:', e);
                            noResults.style.display = 'block';
                        }
                    } else if (xhr.status === 404) {
                        // 处理404状态码，重定向到404页面
                        window.location.href = '/404.html';
                    } else {
                        noResults.style.display = 'block';
                    }
                };
                
                xhr.onerror = function() {
                    loading.style.display = 'none';
                    noResults.style.display = 'block';
                    console.error('请求失败');
                };
                
                xhr.send();
            }
            
            // 渲染搜索结果
            function renderResults(results, keyword) {
                // 清空之前的结果
                searchResults.innerHTML = '';
                
                if (results && results.length > 0) {
                    // 保存所有结果
                    allResults = results;
                    
                    // 计算总页数
                    totalPages = Math.ceil(results.length / resultsPerPage);
                    totalPagesEl.textContent = totalPages;
                    currentPageEl.textContent = currentPage;
                    
                    // 显示结果和分页
                    searchResults.style.display = 'block';
                    pagination.style.display = 'block';
                    
                    // 获取当前页的结果
                    const startIndex = (currentPage - 1) * resultsPerPage;
                    const endIndex = Math.min(startIndex + resultsPerPage, results.length);
                    const pageResults = results.slice(startIndex, endIndex);
                    
                    // 更新分页按钮状态
                    updatePaginationButtons();
                    
                    // 渲染当前页的结果
                    pageResults.forEach(function(result) {
                        const resultItem = document.createElement('div');
                        resultItem.className = 'result-item';
                        
                        // 创建标题元素
                        const title = document.createElement('a');
                        title.className = 'result-title';
                        title.href = result.url;
                        title.target = '_blank';
                        title.textContent = result.title;
                        
                        // 创建URL元素
                        const url = document.createElement('div');
                        url.className = 'result-url';
                        url.textContent = result.url;
                        
                        // 创建内容元素
                        const body = document.createElement('div');
                        body.className = 'result-body';
                        
                        // 高亮关键词
                        const lowerKeyword = keyword.toLowerCase();
                        let bodyText = result.body;
                        
                        // 简单的关键词高亮处理
                        if (lowerKeyword) {
                            const keywordRegex = new RegExp(keyword, 'gi');
                            bodyText = bodyText.replace(keywordRegex, match => 
                                `<span class="highlight">${match}</span>`
                            );
                        }
                        
                        body.innerHTML = bodyText;
                        
                        // 将元素添加到结果项
                        resultItem.appendChild(title);
                        resultItem.appendChild(url);
                        resultItem.appendChild(body);
                        
                        // 将结果项添加到结果容器
                        searchResults.appendChild(resultItem);
                    });
                    
                    // 调整搜索框与结果区域的间距，根据结果数量
                    if (pageResults.length < 5 && totalPages === 1) {
                        // 如果结果很少且只有一页，减小间距
                        searchResults.style.marginTop = '15px';
                    } else if (pageResults.length < 5) {
                        // 如果当前页结果很少，适当减小间距
                        searchResults.style.marginTop = '20px';
                    } else {
                        // 恢复默认间距
                        searchResults.style.marginTop = '30px';
                    }
                } else {
                    // 显示无结果提示
                    noResults.style.display = 'block';
                    pagination.style.display = 'none';
                }
            }
            
            // 更新分页按钮状态
            function updatePaginationButtons() {
                // 上一页按钮
                if (currentPage <= 1) {
                    prevPageBtn.classList.add('disabled');
                } else {
                    prevPageBtn.classList.remove('disabled');
                }
                
                // 下一页按钮
                if (currentPage >= totalPages) {
                    nextPageBtn.classList.add('disabled');
                } else {
                    nextPageBtn.classList.remove('disabled');
                }
                
                // 更新页码显示
                currentPageEl.textContent = currentPage;
            }
            
            // 切换到指定页
            function goToPage(page) {
                if (page < 1 || page > totalPages || page === currentPage) {
                    return;
                }
                
                currentPage = page;
                
                // 滚动到页面顶部
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
                
                // 渲染当前页的结果
                searchResults.innerHTML = '';
                
                const startIndex = (currentPage - 1) * resultsPerPage;
                const endIndex = Math.min(startIndex + resultsPerPage, allResults.length);
                const pageResults = allResults.slice(startIndex, endIndex);
                
                // 调整最后一页的边距，如果结果数量较少
                if (currentPage === totalPages && pageResults.length < 5) {
                    searchResults.style.marginTop = '20px';
                } else {
                    searchResults.style.marginTop = '30px';
                }
                
                pageResults.forEach(function(result) {
                    const resultItem = document.createElement('div');
                    resultItem.className = 'result-item';
                    
                    // 创建标题元素
                    const title = document.createElement('a');
                    title.className = 'result-title';
                    title.href = result.url;
                    title.target = '_blank';
                    title.textContent = result.title;
                    
                    // 创建URL元素
                    const url = document.createElement('div');
                    url.className = 'result-url';
                    url.textContent = result.url;
                    
                    // 创建内容元素
                    const body = document.createElement('div');
                    body.className = 'result-body';
                    
                    // 高亮关键词
                    const lowerKeyword = searchInput.value.toLowerCase();
                    let bodyText = result.body;
                    
                    // 简单的关键词高亮处理
                    if (lowerKeyword) {
                        const keywordRegex = new RegExp(lowerKeyword, 'gi');
                        bodyText = bodyText.replace(keywordRegex, match => 
                            `<span class="highlight">${match}</span>`
                        );
                    }
                    
                    body.innerHTML = bodyText;
                    
                    // 将元素添加到结果项
                    resultItem.appendChild(title);
                    resultItem.appendChild(url);
                    resultItem.appendChild(body);
                    
                    // 将结果项添加到结果容器
                    searchResults.appendChild(resultItem);
                });
                
                // 更新分页按钮状态
                updatePaginationButtons();
            }
            
            // 添加分页按钮的事件监听
            prevPageBtn.addEventListener('click', function() {
                if (currentPage > 1) {
                    goToPage(currentPage - 1);
                }
            });
            
            nextPageBtn.addEventListener('click', function() {
                if (currentPage < totalPages) {
                    goToPage(currentPage + 1);
                }
            });
        });
    </script>
</body>
</html>